<template>
    <div>
        <h2>分页</h2>
        搜索：<input type="text" v-model="f.Tname" />
        <table>
            <tbody><tr>
                <td>全选：<input type="checkbox" v-model="fcheck" @click="checkAll"></td>    
                <td>房行名称</td>
                <td>房型价格</td>
                <td>房型照片</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list.datas" :key="item.id">
                <td>反选<input type="checkbox" :value="item.Id" v-model="ids" @change="checkOne"> </td>
                <td>{{ item.TypeName }}</td>
                <td>{{ item.Prices }}</td>
                <td>{{ item.Imgs }}</td>
                <td>{{ item.State }}</td>
                <td> </td>
            </tr></tbody>
            
        </table>
    </div>

</template>

<script setup lang="ts">
import moment from 'moment'
import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

let list: any = reactive({
    datas: [],
    totalPage: 0,
    totalCount: 0
})

let f: any = reactive({
    PageIndex: 1,
    PageSize: 2,
    Tname: ""
})

// 
// 
let ids: any = ref([]);
let fcheck: any = ref(false);

//全选

const checkAll = () => {
    fcheck.value = !fcheck.value;
    if (fcheck.value == true) {
        ids.value = list.datas.map((item: any) => {
            return item.Id;
        })
    } else {
        ids.value = [];
    }
    console.log(ids);

}

 

//反选
const checkOne = () => {
    if (ids.value.length == list.datas.length) {
        fcheck.value = true;
    } else {
        fcheck.value = false;
    }
}


onMounted(() => {
    Shows();
})

const Shows = () => {
    axios({
        url:"/api/Hotel/GetType",
        method: "get",
        params: f
    }).then((res: any) => {
        list.datas = res.data.data;
        list.totalPage = res.data.totalPage;
        list.totalCount = res.data.totalCount;
    }).catch((err: any) => {
        console.log(err);
        alert('失败了');
    })
}

</script>

<style scoped></style>